<template>
  <div class="iot-page">
    <div class="inner">
      <Map @alarm="alarmAction" ref="mapRef"></Map>
      <el-container class="page-iot-container" direction="vertical">
        <iotHeader :type="type"></iotHeader>
        <el-container v-if="type !== 'command'">
          <el-main class="iot-main" v-if="dataObj">
            <div class="iot-left">
              <Today :type="type" :data="dataObj.todayAlarm"></Today>
              <Week
                ref="week"
                class="mt-30"
                :type="type"
                :data="dataObj.weekAlarmList"
              ></Week>
              <Unit
                v-if="type !== 'warehouse'"
                ref="unit"
                class="mt-30"
                :type="type"
                :data="dataObj.businessCount"
              ></Unit>
            </div>
            <div class="iot-right">
              <Device
                :type="type"
                :data="dataObj.todayDeviceCountByState"
              ></Device>
              <Company
                ref="company"
                class="mt-30"
                :type="type"
                :data="
                  dataObj.alarmBusinessAnalysisList || dataObj.alarmDeviceList
                "
              ></Company>
              <Type
                ref="type"
                class="mt-30"
                :type="type"
                :data="dataObj.todayDeviceCountByState"
                v-if="
                  type == 'fireControl' ||
                    type == 'extinguisher' ||
                    type == 'pool' ||
                    type == 'auto' ||
                    type == 'waterPump' ||
                    type == 'warehouse'
                "
              ></Type>
              <Type
                ref="type"
                class="mt-30"
                :type="type"
                :data="dataObj.percentage"
                v-else
              ></Type>
            </div>
            <div class="iot-bottom">
              <Realtime ref="realtime" :type="type"></Realtime>
            </div>
          </el-main>
        </el-container>
        <el-container v-else>
          <el-main>
            <div class="iot-left">
              <iot-blk
                class="today-blk device-blk"
                title="监控区域"
                :moreType="0"
              >
                <div class="areaTree">
                  <areaTree
                    :isEditable="true"
                    @nodeClick="areaClickAction"
                  ></areaTree>
                </div>
              </iot-blk>
              <guarantee :data="commandInfo" :commandInfo="commandInfo" class="mt-30"></guarantee>
              <resource :data="commandInfo" class="mt-30"></resource>
            </div>
            <div class="iot-right">
              <Process></Process>
            </div>
            <div class="iot-bottom">
              <b-function ref="iotBottom" :areaData="areaData" @addPoint="addPoint"></b-function>
            </div>
          </el-main>
        </el-container>
      </el-container>
    </div>
    <el-dialog
      title="报警未处置提示"
      :visible.sync="warnModalVisible"
      width="400px"
      class="warn-tip-dialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      destroy-on-close
      @close="onWarnModalClose"
    >
      <p class="color-red fs-20 fw-b">
        报警未处置，请及时处置
      </p>
      <p class="mt-20">倒计时关闭</p>
      <p class=" text-center">{{ closeSeconds }}s</p>
    </el-dialog>
  </div>
</template>

<script>
import { mapState } from "vuex";
import iotHeader from "@/components/iot/IOTHeader.vue";
import Map from "@/components/iot/Map.vue";
import Today from "@/components/iot/Today.vue";
import Week from "@/components/iot/Week.vue";
import Unit from "@/components/iot/Unit.vue";
import Device from "@/components/iot/Device.vue";
import Company from "@/components/iot/Company.vue";
import Type from "@/components/iot/Type.vue";
import Realtime from "@/components/iot/Realtime.vue";
import Monitor from "@/components/iot/command/monitor.vue";
import Guarantee from "@/components/iot/command/guarantee.vue";
import Resource from "@/components/iot/command/resource.vue";
import Process from "@/components/iot/command/process.vue";
import BFunction from "@/components/iot/command/B-function.vue";
import areaTree from "@/components/census/AreaTree.vue";

let checkTimer = null;
let handleTimer = null;
let clearTimer = null;
export default {
  name: "Home",
  props: {
    winH: {
      type: Number,
      default: 500,
    },
  },
  data() {
    return {
      type: this.$route.query.type || "fireControl",
      dataObj: null,
      loading: false,
      warnFrame: 0,
      warnModalVisible: false,
      closeSeconds: 10,
      state: this.$route.query.state,
      commandInfo: {},
      areaVisible: false,
      areaData: {},
    };
  },
  components: {
    iotHeader,
    Map,
    Today,
    Week,
    Unit,
    Device,
    Company,
    Type,
    Realtime,
    Monitor,
    Guarantee,
    Resource,
    Process,
    BFunction,
    areaTree,
  },
  watch: {
    $route(to, from) {
      location.reload();
    },
  },
  computed: {
    ...mapState(["scale", "siteInfos"]),
  },
  created() {
    if (this.type !== "command") {
      this.getData();
      clearTimer = setInterval(() => {
        this.getData();
      }, 15000);
      this.getWarnFrame();
    } else {
      this.areaClickAction({ id: 0 });
    }
  },
  beforeDestroy() {
    clearInterval(checkTimer);
    checkTimer = null;
    clearInterval(handleTimer);
    handleTimer = null;
  },
  destroyed() {
    clearInterval(checkTimer);
    checkTimer = null;
    clearInterval(handleTimer);
    handleTimer = null;
  },
  methods: {
    addPoint(data) {
      this.$refs.mapRef.initMarker(data);
    },
    areaClickAction(data) {
      this.areaData = data;
      this.getCommand(data.id);
    },
    getCommand(area) {
      this.$get("/emergencyCommand/emergencyCommandCount", {
        area,
      }).then(
        (res) => {
          if (res.data) {
            this.commandInfo = res.data;
          }
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    getWarnFrame() {
      this.$get("/systemsetup/systemsetup/frameMonitoringDetails").then(
        (res) => {
          const { state, time } = res.data;
          if (state == 1) {
            this.warnFrame = time * 60000;
            this.checkUnhandleAlarm();
          }
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    checkUnhandleAlarm() {
      this.getAlarmCount();
      checkTimer = setInterval(() => {
        this.getAlarmCount();
      }, this.warnFrame);
    },
    getAlarmCount() {
      this.$get("/fireFightingIOT/historicalAlarmInfo/alarmCount").then(
        (res) => {
          if (res.data) {
            this.handleAlarm();
          }
        },
        (err) => {
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    handleAlarm() {
      this.warnModalVisible = true;
      this.closeSeconds = 10;
      handleTimer = setInterval(() => {
        this.closeSeconds--;
        if (this.closeSeconds <= 0) {
          clearInterval(handleTimer);
          this.warnModalVisible = false;
        }
      }, 1000);
    },
    onWarnModalClose() {
      clearInterval(handleTimer);
    },
    getData() {
      // this.openFullLoading()
      let url = "";
      switch (this.type) {
        case "pool":
          url = "/firewater/firewater/getHomePageData";
          break;
        case "smoke":
          url = "/independentsmoke/independentsmoke/getHomePageData";
          break;
        case "monitor":
          url =
            "/firefightingvisualization/firefightingvisualization/getHomePageData";
          break;
        case "fire":
          url = "/electricfire/electricfire/getHomePageData";
          break;
        case "chargingStation":
          url = "/chargingStation/chargingStation/getHomePageData";
          break;

        case "gas":
          url = "/combustiblegas/combustiblegas/getHomePageData";
          break;
        case "fireControl":
          url = "/fireFightingIOT/fireFightingIOT/getHomePageData";
          break;
        case "extinguisher":
          url = "/fireExtinguisher/fireExtinguisher/getHomePageData";
          break;
        case "auto":
          url = "/autoNet/autoNet/getHomePageData";
          break;
        case "gasStation": //智慧加油站
          url =
            "/firefightingvisualization/firefightingvisualization/getGasStationHomePageData";
          break;
        case "ladderControl": //智慧梯控
          url =
            "/firefightingvisualization/firefightingvisualization/getLadderControlHomePageData";
          break;
        case "waters": //智慧水域
          url =
            "/firefightingvisualization/firefightingvisualization/getWatersHomePageData";
          break;
        case "eye": //慧眼识别
          url =
            "/firefightingvisualization/firefightingvisualization/getHomePageData";
          break;
        case "waterPump":
          url = "/waterPump/waterPump/getHomePageData";
          break;
        case "video":
          url =
            "/firefightingvisualization/firefightingvisualization/getVisualVideoHomePageData";
          break;
        case "warehouse":
          url = "/fireFightingIOT/fireFightingIOT/getHomePageDataWareHouse";
          break;
        default:
          url =
            "/firefightingvisualization/firefightingvisualization/getHomePageData";
          break;
      }
      if (!url) return;
      this.$get(url, {
        nums: 5,
        type: 1,
        userType: this.siteInfos.userType,
      }).then(
        (res) => {
          // this.closeFullLoading()
          this.dataObj = res.data;
        },
        (err) => {
          // this.closeFullLoading()
          if (err.msg) {
            this.$message.error(err.msg);
          }
        }
      );
    },
    alarmAction() {
      this.getData();
      if (this.$refs.realtime) {
        this.$refs.realtime.getData();
      }
    },
  },
  destroyed() {
    clearInterval(clearTimer);
  },
};
</script>

<style lang="less">
@import "../assets/css/IOT.less";
.areaTree {
  overflow: auto !important;
  height: 0.7rem !important;
  .area-tree {
    padding: 0 !important;
    height: 100% !important;
  }
}
</style>
